<template>
  <div class="main">
    <div id="oneChart"></div>
    <div class="box">
      <div id="avgChart1"></div>
      <p>{{ title1 }}</p>
    </div>
    <div class="box">
      <div id="avgChart2"></div>
      <p>{{ title2 }}</p>
    </div>
  </div>
</template>

<script>
import { inject, onMounted, reactive, toRefs } from 'vue'
import 'echarts-liquidfill/src/liquidFill'
export default {
  setup() {
    let $echarts = inject('echarts')
    let dataAxis = [
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
      'xx党支部',
    ]
    let data = [
      100, 100, 100, 92, 92, 89, 89, 80, 80, 78, 78, 57, 57, 56, 46, 40, 35, 26,
      22, 15,
    ]
    let getAvg = (data) => {
      let sum = 0
      for (let i = 0; i < data.length; i++) {
        sum += data[i]
      }
      return parseFloat(sum / data.length).toFixed(1) + '%'
    }
    let avg1 = getAvg(data)
    let baifenbi = parseFloat(avg1).toFixed(1)
    let dataAvg1 = [
      parseFloat(baifenbi).toFixed(2) / 100 + 0.05,
      parseFloat(baifenbi).toFixed(2) / 100,
      parseFloat(baifenbi).toFixed(2) / 100 - 0.05,
    ]
    let title = reactive({
      title1: '上月党费缴纳率',
      title2: '本月党费缴纳率',
    })
    onMounted(() => {
      // 条形图
      let chartDom = document.getElementById('oneChart')
      let myChart = $echarts.init(chartDom, null, {
        width: 1000,
        height: 400,
      })
      myChart.setOption({
        xAxis: {
          data: dataAxis,
          axisLabel: {
            inside: true,
            color: '#999',
            rotate: 45,
            margin: -40,
            padding: [0, 0, 0, -20],
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          z: 10,
        },
        yAxis: {
          axisLine: {
            show: false,
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            color: '#999',
          },
          splitLine: {
            lineStyle: {
              color: 'rgba(122,122,122,.2)',
            },
          },
        },
        dataZoom: [
          {
            type: 'inside',
          },
        ],
        series: [
          {
            type: 'bar',
            label: {
              show: true,
              position: 'top',
              color: '#fff',
            },
            itemStyle: {
              color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#3e60ad' },
                { offset: 0.5, color: '#49a5e0' },
                { offset: 1, color: '#33c4d2' },
              ]),
            },
            emphasis: {
              itemStyle: {
                color: new $echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#33c4d2' },
                  { offset: 0.5, color: '#49a5e0' },
                  { offset: 1, color: '#3e60ad' },
                ]),
              },
            },
            data: data,
          },
        ],
      })
      // 水球图1
      let chartDom2 = document.getElementById('avgChart1')
      let myChart2 = $echarts.init(chartDom2, null, {
        width: 300,
        height: 300,
      })
      myChart2.setOption({
        series: [
          {
            type: 'liquidFill',
            waveAnimation: 15,
            amplitude: 10,
            data: dataAvg1,
            /* data: [
              0.599,
              {
                value: '0.599',
                direction: 'left',
                itemStyle: {
                  normal: {
                    color: '#0d69b5',
                  },
                },
              },
            ], */
            color: [
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['rgba(255,110,0,0.58)'],
                  },
                  {
                    offset: 0,
                    color: ['rgba(250,255,6, 0.2)'],
                  },
                ],
                global: false,
              },
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['rgba(255,196,7, 1)'],
                  },
                  {
                    offset: 0,
                    color: ['rgba(255,159,7, 0.8)'],
                  },
                ],
                global: false,
              },
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['rgba(255,69,13, 1)'],
                  },
                  {
                    offset: 0,
                    color: ['rgba(255,163,0, 0)'],
                  },
                ],
                global: false,
              },
            ],
            radius: '100%',
            outline: {
              show: false,
            },
            label: {
              normal: {
                formatter: function () {
                  return avg1
                },
              },
            },
            backgroundStyle: {
              borderWidth: 2, //内边框宽度
              borderColor: 'rgba(243,118,42,.3)', //背景内边框
              color: 'transparent', //背景颜色
              shadowColor: 'rgba(243,118,42,.3)', //阴影
              shadowBlur: 10, //阴影模糊
            },
          },
        ],
      })
      // 水球图2
      let chartDom3 = document.getElementById('avgChart2')
      let myChart3 = $echarts.init(chartDom3, null, {
        width: 300,
        height: 300,
      })
      myChart3.setOption({
        series: [
          {
            type: 'liquidFill',
            waveAnimation: 15,
            amplitude: 10,
            data: dataAvg1,
            color: [
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['#0d69b5'],
                  },
                  {
                    offset: 0,
                    color: ['rgba(250,255,6, 0.2)'],
                  },
                ],
                global: false,
              },
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: [' #084bfc'],
                  },
                  {
                    offset: 0,
                    color: ['#087bfc'],
                  },
                ],
                global: false,
              },
              {
                type: 'linear',
                x: 0,
                y: 1,
                x2: 0,
                y2: 0,
                colorStops: [
                  {
                    offset: 1,
                    color: ['#0bc5f3'],
                  },
                  {
                    offset: 0,
                    color: ['rgba(255,163,0, 0)'],
                  },
                ],
                global: false,
              },
            ],
            radius: '100%',
            outline: {
              show: false,
            },
            label: {
              normal: {
                formatter: function () {
                  return avg1
                },
              },
            },
            backgroundStyle: {
              borderWidth: 2, //内边框宽度
              borderColor: 'rgba(52,295,211,.3)', //背景内边框
              color: 'transparent', //背景颜色
              shadowColor: 'rgba(52,295,211,.3)', //阴影
              shadowBlur: 10, //阴影模糊
            },
          },
        ],
      })
    })

    return {
      ...toRefs(title),
      dataAxis,
      getAvg,
      avg1,
      dataAvg1,
      /*  yMax, */
    }
  },
}
</script>

<style lang="less" scoped>
.main {
  display: flex;
  background: #100c2a;
}
/* #avgChart2{
  margin-left: 50px;
} */
p {
  font-size: 26px;
  font-weight: 400;
  color: #ffffff;
  text-align: center;
  margin-top: 20px;
}
.box {
  width: 300px;
  height: 350px;
  margin: 20px;
}
</style>
